<template>
    <div class="header">
        <div class="user_info">
            <div class="avatar">
                <el-avatar icon="el-icon-user-solid"></el-avatar>
            </div>
            <div class="cont">
                <p class="name">{{username}}</p>
                <p @click="quit">退出登录</p>
            </div>
            <img @click="quit" src="../assets/icon/close.png" alt="">
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            username:JSON.parse(localStorage.getItem('userinfo')).username
        }
    },
    mounted(){

    },
    methods:{
        go(){
            this.$router.push('/')
        },
        quit(){
            this.$confirm('确定退出登录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this._quit()
                
            }).catch(() => {
            
            })
        },
        async _quit(){
            let {data:{status,result}} = await this.$http.post(this.$api.loginout)
            if (status==0) {
                this.$notify({
                    title: '成功',
                    message: result.msg,
                    type: 'success'
                });
                localStorage.removeItem("userinfo");
                // localStorage.removeItem("token");
                localStorage.removeItem("isLogin");
                this.$router.push('/login')
            }
            
        }
    }
}
</script>
<style lang="scss" scoped>
    .header{
        width: 100%;
        height: 100%;
        border-bottom: solid 1px #e6e6e6;
        display: flex;
        justify-content:flex-end;
        background-color: #ffffff;
        .user_info{
            width: 200px;
            display: flex;
            align-items: center;
            .cont{
                font-size: 14px;
                margin: 0 10px 0 5px;
                p{
                    cursor: pointer;
                    font-size: 12px;
                    color: #666666;
                }
                .name{
                    font-size: 14px;
                    font-weight: 600;
                    color: #333333;
                }
            }
            img{
                width: 30px;
                height: 30px;
            }
        }
    }
</style>